import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { Route, withRouter } from 'react-router-dom';
import { List, InputItem, WhiteSpace, WingBlank, SearchBar } from 'weaver-mobile';
import { Browser, ListPage, BrowserHrm, BrowserCity } from 'weaver-mobile-page';

const FormItem = List.FormItem;
const template = {
  default: [
    {
      key: 'col1',
      configs: [
        {
          key: 'col1_row1',
          configs: [
            { key: 'showname' },
          ],
        },
      ],
    },
  ],
};
const options = [
  {
    key: '-99991',
    showname: '-99991 路径',
  },
  {
    key: '-99399',
    showname: '-99399 相册',
  },
  {
    key: '1',
    showname: '1 人力资源',
  },
  {
    key: '4',
    showname: '4 部门',
  },
  {
    key: '7',
    showname: '7 客户',
  },
  {
    key: '8',
    showname: '8 项目',
  },
  {
    key: '9',
    showname: '9 文档',
  },
  {
    key: '12',
    showname: '12 币种',
  },
  {
    key: '13',
    showname: '13 产品类别',
  },
  {
    key: '16',
    showname: '16 请求',
  },
  {
    key: '17',
    showname: '17 多人力资源',
  },
  {
    key: '18',
    showname: '18 多客户',
  },
  {
    key: '22',
    showname: '22 报销费用类型',
  },
  {
    key: '23',
    showname: '23 资产',
  },
  {
    key: '24',
    showname: '24 岗位',
  },
  {
    key: '25',
    showname: '25 资产组',
  },
  {
    key: '27',
    showname: '27 应聘人',
  },
  {
    key: '28',
    showname: '28 会议',
  },
  {
    key: '29',
    showname: '29 奖惩种类',
  },
  {
    key: '30',
    showname: '30 学历',
  },
  {
    key: '31',
    showname: '31 用工性质',
  },
  {
    key: '32',
    showname: '32 培训安排',
  },
  {
    key: '33',
    showname: '33 加班类型',
  },
  {
    key: '34',
    showname: '34 请假类型',
  },
  {
    key: '35',
    showname: '35 业务合同',
  },
  {
    key: '36',
    showname: '36 合同性质',
  },
  {
    key: '37',
    showname: '37 多文档',
  },
  {
    key: '38',
    showname: '38 相关产品',
  },
  {
    key: '52',
    showname: '52 公文种类',
  },
  {
    key: '53',
    showname: '53 紧急程度',
  },
  {
    key: '54',
    showname: '54 秘密等级',
  },
  {
    key: '55',
    showname: '55 发文字号',
  },
  {
    key: '57',
    showname: '57 多部门',
  },
  {
    key: '58',
    showname: '58 城市',
  },
  {
    key: '59',
    showname: '59 称呼',
  },
  {
    key: '60',
    showname: '60 客户类型',
  },
  {
    key: '61',
    showname: '61 客户描述',
  },
  {
    key: '62',
    showname: '62 客户大小',
  },
  {
    key: '63',
    showname: '63 行业',
  },
  {
    key: '65',
    showname: '65 多角色',
  },
  {
    key: '67',
    showname: '67 客户联系人',
  },
  {
    key: '69',
    showname: '69 计量单位',
  },
  {
    key: '87',
    showname: '87 会议室',
  },
  {
    key: '89',
    showname: '89 会议类型',
  },
  {
    key: '119',
    showname: '119 专业',
  },
  {
    key: '129',
    showname: '129 项目模板',
  },
  {
    key: '135',
    showname: '135 多项目',
  },
  {
    key: '137',
    showname: '137 车辆',
  },
  {
    key: '141',
    showname: '141 人力资源条件',
  },
  {
    key: '142',
    showname: '142 收发文单位',
  },
  {
    key: '152',
    showname: '152 多请求',
  },
  {
    key: '160',
    showname: '160 角色人员',
  },
  {
    key: '161',
    showname: '161 自定义单选',
  },
  {
    key: '162',
    showname: '162 自定义多选',
  },
  {
    key: '164',
    showname: '164 分部',
  },
  {
    key: '165',
    showname: '165 分权单人力资源',
  },
  {
    key: '166',
    showname: '166 分权多人力资源',
  },
  {
    key: '167',
    showname: '167 分权单部门',
  },
  {
    key: '168',
    showname: '168 分权多部门',
  },
  {
    key: '169',
    showname: '169 分权单分部',
  },
  {
    key: '170',
    showname: '170 分权多分部',
  },
  {
    key: '171',
    showname: '171 归档流程',
  },
  {
    key: '178',
    showname: '178 年份',
  },
  {
    key: '179',
    showname: '179 年份',
  },
  {
    key: '182',
    showname: '182 单网上调查',
  },
  {
    key: '184',
    showname: '184 多会议室',
  },
  {
    key: '194',
    showname: '194 多分部',
  },
  {
    key: '222',
    showname: '222 多报销费用类型',
  },
  {
    key: '226',
    showname: '226 系统集成单选浏览按钮',
  },
  {
    key: '227',
    showname: '227 系统集成多选浏览按钮',
  },
  {
    key: '242',
    showname: '242 资产类型',
  },
  {
    key: '243',
    showname: '243 资产状态',
  },
  {
    key: '244',
    showname: '244 项目类型',
  },
  {
    key: '245',
    showname: '245 工作类型',
  },
  {
    key: '246',
    showname: '246 项目状态',
  },
  {
    key: '251',
    showname: '251 成本中心',
  },
  {
    key: '252',
    showname: '252 所属类别',
  },
  {
    key: '256',
    showname: '256 自定义树形单选',
  },
  {
    key: '257',
    showname: '257 自定义树形多选',
  },
  {
    key: '258',
    showname: '258 国家',
  },
  {
    key: '259',
    showname: '259 语言',
  },
  {
    key: '260',
    showname: '260 职称',
  },
  {
    key: '262',
    showname: '262 办公地点',
  },
  {
    key: '263',
    showname: '263 区县',
  },
  {
    key: '264',
    showname: '264 客户状态',
  },
  {
    key: '265',
    showname: '265 获得途径',
  },
  {
    key: '267',
    showname: '267 角色',
  },
  {
    key: '268',
    showname: '268 星期多选',
  },
  {
    key: '269',
    showname: '269 多提醒方式',
  },
  {
    key: '270',
    showname: '270 服务项目',
  },
  {
    key: '274',
    showname: '274 商机来源',
  },
  {
    key: '278',
    showname: '278 多岗位',
  },
  {
    key: '279',
    showname: '279 合同',
  },
  {
    key: '280',
    showname: '280 班次',
  },
  {
    key: '281',
    showname: '281 职务类别',
  },
  {
    key: '282',
    showname: '282 职务',
  },
  {
    key: '284',
    showname: '284 工资银行',
  },
  {
    key: '285',
    showname: '285 主题分类',
  },
  {
    key: '292',
    showname: '292 发票',
  },
  {
    key: '293',
    showname: '293 多发票',
  },
  {
    key: '301',
    showname: '301 培训种类',
  },
  {
    key: '302',
    showname: '302 培训规划',
  },
  {
    key: '303',
    showname: '303 培训资源',
  },
  {
    key: '304',
    showname: '304 合同模板',
  },
  {
    key: '305',
    showname: '305 考核项目',
  },
  {
    key: '306',
    showname: '306 合同种类',
  },
  {
    key: '307',
    showname: '307 招聘信息',
  },
  {
    key: '308',
    showname: '308 招聘计划',
  },
  {
    key: '309',
    showname: '309 用工需求',
  },
  {
    key: '2222',
    showname: '2222 省份',
  },
];
let searchRe = [];

@inject('browserAllBrowserStore')
//@withRouter
@observer
export default class AllBrowser extends Component {
  constructor(props) {
    super(props);
    const { history } = this.props;
    
    //history.push('/app/demo-4/list');
  }
  componentWillMount() {
    const { browserAllBrowserStore } = this.props;
    const { list,type=1,browserInstance } = browserAllBrowserStore;
    list.setState({ data: options });
    this.renderBrowser(type);
    console.log(browserInstance,"browserInstance");
  }
  renderBrowser = (type) => {
    const { browserAllBrowserStore } = this.props;
    const { setState, browser, browserMutil,
      dataUrl, conditionURL, dataParamsObj, tabsArr, browserCity1, browserCity2, browserCity3,
      browserCity4, browserHrm, browserHrm1, browserHrmValue, browserHrmValue1} = browserAllBrowserStore;
      let {browserInstance} = browserAllBrowserStore;
    if (type === '1' || type === '17') {
      return (
        <div>
          <WhiteSpace size="lg" />
          <WingBlank size="lg">单选</WingBlank>
          <WhiteSpace size="lg" />
          <BrowserHrm
            label="人力单选"
            store={browserHrm}
            hasAdvanceSerach
            isSingle={true}
            type={type}
            onChange={(...arg) => {
              console.log('BrowserHrm onchange: ', ...arg);
              setState({ browserHrmValue: arg[2] });
            }}
            valueArray={browserHrmValue}
          />
          <WhiteSpace size="lg" />
          <WingBlank size="lg">多选</WingBlank>
          <WhiteSpace size="lg" />
          <BrowserHrm
            label="人力多选"
            store={browserHrm1}
            hasAdvanceSerach
            isSingle={false}
            type={type}
            onChange={(...arg) => {
              console.log('BrowserHrm onchange: ', ...arg);
              setState({ browserHrmValue1: arg[2] });
            }}
            valueArray={browserHrmValue1}
          />
        </div>
      );
    }
    if (type === '258') {
      return (
        <BrowserCity label="国家" type={258} store={browserCity1} onChange={(id, name, data) => console.log('国家', id, name, data)} />
      );
    }
    if (type === '2222') {
      return (
        <BrowserCity label="省份" type={2222} store={browserCity2} valueArray={[{ id: '3', name: '天津' }]} onChange={(id, name, data) => console.log('省份', id, name, data)} />
      );
    }
    if (type === '58') {
      return (
        <BrowserCity label="城市" type={58} store={browserCity3} valueArray={[{ id: '1', name: '北京' }]} onChange={(id, name, data) => console.log('城市', id, name, data)} />
      );
    }
    if (type === '263') {
      return (
        <BrowserCity label="区县" type={263} store={browserCity4} onChange={(id, name, data) => console.log('区县', id, name, data)} />
      );
    }
    return (
      <div>
        <WhiteSpace size="lg" />
        <WingBlank size="lg">单选</WingBlank>
        <WhiteSpace size="lg" />
        <Browser
          label={type}
          store={browser}
          hasAdvanceSerach
          //ref={(ref) => browserInstance = ref}
          dataParams={dataParamsObj}
          type={type}
          tabs={tabsArr}
          dataUrl={dataUrl}
          conditionURL={conditionURL}
          onChange={(...arg) => {
            console.log('Browser onchange: ', ...arg);
          }}
        />
        <WhiteSpace size="lg" />
        <WingBlank size="lg">多选</WingBlank>
        <WhiteSpace size="lg" />
        <Browser
          label={type}
          store={browserMutil}
          hasAdvanceSerach
          isSingle={false}
          dataParams={dataParamsObj}
          type={type}
          tabs={tabsArr}
          dataUrl={dataUrl}
          conditionURL={conditionURL}
          onChange={(...arg) => {
            console.log('Browser onchange: ', ...arg);
          }}
        />
      </div>
    );
  }
  render() {
    const { browserAllBrowserStore } = this.props;
    const height = document.documentElement.clientHeight - 44;
    const { type, list } = browserAllBrowserStore;
    const keys = ['dataUrl', 'conditionURL', 'type', 'dataParams', 'tabs'];
    return (
      <div>
        {/* <Route
          key={0}
          path={'/app/demo-4/list'}
          render={() => ( */}
            {/* <div>
              <SearchBar
                placeholder="搜索"
                onFocus={this.handleFocus}
                onSubmit={this.search}
              />
              <div style={{ height, overflowY: 'auto' }}>
                <ListPage.Normal
                  store={list}
                  rowKey={'key'}
                  template={template}
                  onRowClick={this.handleRowClick}
                />
              </div>
            </div> */}
          {/* )}
        /> */}
        
            <div>
              {this.renderBrowser(type)}
              
            </div>)}
      </div>
    );
  }
  search = (e) => {
    console.log(e);
    const { browserAllBrowserStore } = this.props;
    const { list } = browserAllBrowserStore;
    searchRe = [];
    options.map((item) => {
      if (item.showname.indexOf(e) !== -1) {
        searchRe.push(item);
      }
    });
    list.setState({ data: searchRe });
  }
  handleFocus = () => {
    const { browserAllBrowserStore } = this.props;
    const { list } = browserAllBrowserStore;
    list.setState({ data: options });
  }
  handleRowClick = (e) => {
    const { history } = this.props;
    this.handleChange(e.key);
    //history.push('/app/taskBrowser');
  }
  
}